<template>
  <div class="box">
    <el-row class="tac">
      <el-col class="menu" :span="4">
        <el-menu active-text-color="orange" background-color="#545c64" class="el-menu-vertical-demo"
          :default-active="activeIndex" text-color="#fff" @open="handleOpen" @close="handleClose" style="height: 100vh">
          <personal-data></personal-data>
          <div v-for="item in $menuStore.list" :key="item._id">
            <el-sub-menu v-if="item.list?.length" :index="item._id">
              <template #title>
                <span class="spanBlock"><el-icon>
                    <FolderAdd />
                  </el-icon>{{ item.name }}</span>
              </template>
              <el-menu-item v-for="item2 in item.list" :key="item2.id" :index="item2.id">
                <span class="spanBlock"><a :href="'#/main' + item2.path"><el-icon><icon-menu /></el-icon>{{ item2.name
                }}</a></span>
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item v-if="!item.list?.length" :index="item._id">
              <span class="spanBlock"><a :href="'#/main' + item.path"><el-icon><icon-menu /></el-icon>{{ item.name
              }}</a></span>
            </el-menu-item>
          </div>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <div class="header" style="background-color: #fff !important">
          <!-- 头部导航 -->
          <el-menu :default-active="ActiveIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
            @select="handleSelect" style="height: 60px; justify-content: flex-end; background-color: #fff" id="ikun">
            <el-sub-menu index="2">
              <template #title> 个人信息/退出</template>
              <el-menu-item index="2-1" type="primary" @click="drawer = true">修改个人账号信息</el-menu-item>
              <el-menu-item index="2-3" @click="Exit">退出登录</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
        <!--右侧弹出窗口部分 -->
        <el-drawer v-model="drawer" title="I am the title" :with-header="false">
          <!-- 个人信息内容部分 -->
          <div class="personal">
            <h3 style="text-align: center">个人信息页面</h3>
            <!-- 换头像 -->
            <div class="perimgbox" style="overflow: hidden">
              <div class="perimg"><img :src="'/api/' + $userInfoStore.userinfo.img" /></div>
              <el-upload ref="uploadRef" name="filename" class="upload-demo" action="/api/uploads" :auto-upload="true"
                :on-success="success"><el-button @click="setImg">更换头像</el-button></el-upload>
            </div>
            <!-- 基本信息 -->
            <!-- 基本信息 -->
            <div class="basic">
              <p>入职时间： <span>1721年12月1日</span></p>
              <el-divider border-style="dashed" />
              <p>联系方式： <span>13888866666</span></p>
              <el-divider border-style="dotted" />
              <p>居住地址： <span>金融港B18栋2309班刘超隔壁</span></p>
            </div>
            <!-- 修改密码 -->
            <div class="pswbox">
              <p>修改密码</p>
              <span class="tip">{{ pwdTip }}</span>
              <el-input v-model="pwd" type="password" placeholder="请输入原密码" show-password style="margin-bottom: 5px" />
              <el-input v-model="newpwd" type="password" placeholder="请输入新密码" show-password style="margin-bottom: 5px" />
              <span class="tip">{{ newpwdTip }}</span>
              <el-input v-model="newpwd2" type="password" placeholder="请确认新密码" show-password style="margin-bottom: 5px" />

              <el-button type="primary" @click="setPassWord">确认修改密码</el-button>
            </div>
          </div>
        </el-drawer>
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onUpdated } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useMenuStore, useuserInfoStore } from '../stores/counter'
import { Menu as IconMenu } from '@element-plus/icons-vue'
import PersonalData from '@/components/PersonalData.vue'
import * as i18n from '@/i18n'
import { userUpdate, userQuery } from '../services/userService'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules, UploadInstance } from 'element-plus'

let $menuStore = useMenuStore()
let $userInfoStore = useuserInfoStore()

let $router = useRouter() //全局路由
let $route = useRoute() //单个路由

// 修改头像
let fileSuccess = ref<any>('') //上传成功文件的集合
const uploadRef = ref<UploadInstance>() //组件名称

// 密码
let pwd = ref('')
let newpwd = ref('')
let newpwd2 = ref('')
let pwdTip = ref('')
let newpwdTip = ref('')

// 侧边栏弹出窗相关代码
const drawer = ref(false)
// 侧边栏密码
const input = ref('')

// 头部导航部分
const ActiveIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}

let activeIndex = ref('')

if (!$menuStore.list.length) {
  $router.push('/')
} else {
  let path = $route.path
  let findList = $menuStore.list.filter((item: any) => '/main' + item.path == path)
  if (findList.length) {
    activeIndex.value = findList[0]['_id']
  } else {
    let findList1: any = ref()
    $menuStore.list.forEach((item: any) => {
      if (item.list) {
        if (item.list?.filter((item2: any) => '/main' + item2.path == path).length) {
          findList1 = item.list?.filter((item2: any) => '/main' + item2.path == path)
        }
      }
    })
    if (findList1?.length) {
      activeIndex.value = findList1[0]['id']
    } else {
      activeIndex.value = $menuStore.list[0]['_id']
    }
  }
}

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const change = (lang: string) => {
  i18n.default.global.locale = lang
}

// 退出
let Exit = () => {
  $menuStore.removeList()
  $userInfoStore.removeInfo()
  window.localStorage.removeItem('token')
  window.localStorage.removeItem('menuList')
  window.localStorage.removeItem('routerList')
  window.localStorage.removeItem('userinfo')
  $router.push('/')
}

// 修改密码
let setPassWord = async () => {
  if (newpwd.value == newpwd2.value) {
    newpwdTip.value = ''
    let res = await userQuery({
      userid: $userInfoStore.userinfo.id,
      pwd: pwd.value,
      newpwd: newpwd.value
    })
    if (res.data.code == 200) {
      pwdTip.value = ''
      ElMessage('修改成功，请重新登录')
      $router.push('/')
    } else {
      pwdTip.value = res.data.msg
    }
  } else {
    newpwdTip.value = '两次密码输入不一致'
  }
}

// 修改头像
let setImg = async () => {
  uploadRef.value!.submit() //上传
}

let success = async (res: any) => {
  if (res.code == 200) {
    fileSuccess.value = res.url
    let res2 = await userUpdate({ _id: $userInfoStore.userinfo.id, img: fileSuccess.value })
    if (res2.data.userData.length) {
      let userinfo: any = JSON.parse(window.localStorage.getItem('userinfo'))
      userinfo.img = fileSuccess.value
      window.localStorage.setItem('userinfo', JSON.stringify(userinfo))
      $userInfoStore.inituserinfo(userinfo)
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-grow {
  flex-grow: 1;
}

.header {
  width: 100%;
  height: 60px;
}

.spanBlock {
  display: block;
  width: 100%;
  height: 100%;

  a {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.menuItem {
  position: relative;
  // .menuEl{
  //   position: absolute;
  //   top:150px;
  //   left: 0;
  //   z-index:100
  // }
}

/* 个人信息相关样式 */
.tip {
  font-size: 12px;
  color: red;
}

.personal .perimgbox {
  margin: auto;
  width: 280px;
  height: 200px;
  background: url(https://img2.baidu.com/it/u=2726211088,1023663515&fm=253&fmt=auto&app=120&f=JPEG?w=899&h=500) no-repeat;
  background-size: 1000px 550px;
  background-position: -357px -54px;
  box-sizing: border-box;
  padding: 30px 0 0 78px;
}

.perimgbox .perimg {
  width: 110px;
  height: 110px;
  background-color: #fff;
  border-radius: 50%;

  img {
    width: 100%;
    height: 100%;
    border-radius: 110px;
  }
}

.perimgbox button {
  margin-top: 18px;
  margin-left: 15px;
}

.basic {
  width: 98%;
  height: 160px;
  border: skyblue solid 1px;
  font-size: 12px;
  border-radius: 10px;
  margin-top: 20px;
  padding: 10px 20px;
  box-sizing: border-box;
}

.basic p {
  height: 10px;
}

.pswbox p {
  margin-bottom: 10px;
}

.pswbox {
  margin-top: 10px;
  width: 98%;
  height: 200px;
  border: skyblue solid 1px;
  border-radius: 10px;
  padding: 10px 10px;
  box-sizing: border-box;
}

.pswbox button {
  display: block;
  margin: auto;
}
</style>
